import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'

// !#1定义
// class Hello extends React.Component {
class Hello extends Component {
  // 必须要有 render 方法
  render() {
    // console.log(this) // render 中的 this 是类组件实例？
    // return 什么就表示渲染什么
    return <h1>Hello React</h1>
  }
}

// !#2 使用
// 单标签闭合或双标签
// render 渲染类组件的过程
// render 解析 <Hello/>，发现是大写字母开头的，所以会被当做组件解析
// 又发现是 class 声明的，所以会被当做类组件解析
// 它内部会 const hello = new Hello() 得到一个实例，接下来内部会调用 实例.render()
// 得到 JSX，由 Babel 转成 React.createElement() 这种形式，React.createElement() 调用完毕之后返回虚拟 DOM
// render 负责把虚拟 DOM 转成真实 DOM 并渲染
ReactDOM.createRoot(document.querySelector('#root')).render(<Hello />)
